
// 链式运动,可以在上次运动接收开启下次运动 

// aniType 运动方式  (normal fast slow)
// fn      回调函数,在运动结束时执行
function animate (ele, attr, end, aniType = "normal", fn) {
  //   cur 1. 记录盒子最开始的初始值  2. 记录每次运动时的当前位置
  var cur = parseFloat(getStyle(ele, attr));   //传统的获取非行内样式 
  end = parseFloat(end);

  var speed = 0;   //加速运动
  clearInterval(ele.timer);   //开启下一个计时器之前 清除了上一个

  // 元素节点的本质  => 对象(属性和方法)  => 给对象赋值一个不存在的属性 => 新增该属性到对象中 
  // ele.timer = xxx   把计时器的编号 存储到 当前运动的元素上 => 取 ele.timer
  ele.timer = setInterval(function () {

    if (aniType == "normal") {
      // 匀速运动
      speed = end >= cur ? 20 : -20;

    } else if (aniType == "fast") {
      // 加速运动   (speed = +10  -10)
      //正向运动 end>cur   speed正值(速度出现小数)    speed + 5
      //反选运动 end<cur   speed负值(速度出现小数)    speed - 5 
      speed = end >= cur ? speed + 5 : speed - 5;
    } else if (aniType == "slow") {
      // 缓冲运动
      // (终点值 - 当前值) / 缓冲因子  => 剩余距离 / n
      //  缓冲因子 一般 8-12之间
      speed = (end - cur) / 10;
      //正向运动 end>cur   speed正值(速度出现小数)    0.000001   => 向上取整
      //反选运动 end<cur   speed负值(速度出现小数)   -0.000001   => 向下取整
      speed = end >= cur ? Math.ceil(speed) : Math.floor(speed);
    }
    // console.log(cur,speed);

    cur += speed;
    ele.style[attr] = cur + "px";
    if (Math.abs(end - cur) < Math.abs(speed)) {  // cur >= 100   超出临界值
      clearInterval(ele.timer);
      ele.style[attr] = end + "px";   //强制到达终点

      if (fn) {   //如果传入了回调函数 => 在运动结束时执行
        fn();
      }
    }
  }, 10);
}


function getStyle (ele, attr) {
  if (window.getComputedStyle) {
    return window.getComputedStyle(ele)[attr];
  } else {
    return ele.currentStyle[attr];
  }
}
